﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <title>Index</title>
</head>
<body>
    <div>
        省：<select id="s1" onchange="show(this.value,'2')"></select><br />
        市：<select id="s2" onchange="show(this.value,'3')"></select><br />
        县：<select id="s3"></select><br />
    </div>
</body>
</html>
<script>
    $(function ()
    {
        show(0, "1");
    })
    function show(id,s)
    {
        $.ajax({
            url: "/Home/show",
            type: "post",
            data:{id:id},
            dataType:"json",
            success:function(data)
            {
                $("#s"+s).empty();
                for (var i = 0; i < data.length; i++) {
                    $("#s"+s).append("<option value='" + data[i].AreaId + "'>" + data[i].AreaName + "</option>")
                    switch(s)
                    {
                        case "1":
                            show($("#s" + s).val(), "2")
                            break;
                        case "2":
                            show($("#s" + s).val(), "3")
                            break
                      default:break;
                    }
                }

            }

        })

    }
</script>